<template>
  <div>
    <el-card>
      <p style="font-size: 20px">新增角色</p>
      <!-- 表单区域 -->
      <el-form
        class="form-location"
        label-width="150px"
        :label-position="labelPosition"
        :model="role"
      >
        <el-form-item label="角色名称">
          <el-input class="input-size" v-model="role.name"></el-input>
        </el-form-item>
        <el-form-item label="权限分配">
          <el-checkbox-group v-model="role.auth" class="check-box">
            <el-checkbox
              class="check-in"
              v-for="(item, index) in auth"
              :key="index"
              :label="item.id"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :offset="14">
          <el-button type="success" style="width: 150px" @click="add()"
            >确定</el-button
          >
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
const qs = require('qs')
export default {
  data() {
    return {
      labelPosition: 'left',
      role: {
        name: null,
        auth: [],
      },
      auth: [],
    }
  },
  methods: {
    async getAuth() {
      const { data: res } = await this.$http.get('/admin/auth/getAll')
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      console.log(res)
      this.auth = res.data
    },
    async add() {
      var that = this
      console.log(this.role)
      const { data: res } = await this.$http.get('admin/role/create', {
        params: {
          name: that.role.name,
          auths: that.role.auth,
        },
        paramsSerializer: function (params) {
          return qs.stringify(params, { arrayFormat: 'repeat' })
        },
      })
      if (res.code !== 200) return this.$message.error('Error:' + res.message)
      else this.$message.success('添加角色成功')
    },
  },
  created() {
    this.getAuth()
  },
}
</script>

<style lang="less" scope>
.form-location {
  margin-left: 180px;
}

.input-size {
  width: 280px;
}

.check-box {
  width: 600px;
}

.check-in {
  width: 180px;
}
</style>